<!-- ***************************************************************************
* Copyright (c) 2013 IBM Corp.
* Copyright 2017 Huawei Technologies Co., Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*    http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**************************************************************************** -->
<!-- this sourcecode is modified by Huawei Technologies Co., Ltd. -->
<!DOCTYPE HTML>
<html>

<head>
  <title>Huawei Air - Your Account</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="css/themes/claro/claro.css">
  <link rel="stylesheet" href="css/themes/dijit.css">
  <link rel="stylesheet" href="css/themes/claro/claroGrid.css">

  <script type="text/javascript" src="js/acmeair-common.js"></script>
  <script src="https://download.dojotoolkit.org/release-1.7.12/dojo-release-1.7.12/dojo/dojo.js" djConfig="parseOnLoad: true"></script>

  <script>
	dojo.require("dojo.parser");

	dojo.require("dojo.cookie");

	dojo.require("dijit.form.TextBox");
	dojo.require("dijit.form.NumberTextBox");
	dojo.require("dijit.form.FilteringSelect");
	dojo.require("dijit.form.Button");
    dojo.require("dijit.Dialog");
    dojo.require("dijit.Toolbar");
    dojo.require("dijit.Declaration");

	dojo.addOnLoad(pageLoaded);

	function pageLoaded() {
		var loggedinuser = dojo.cookie("loggedinuser");
		if (loggedinuser == null) {
			alert("you must login first to access this page");
			window.location.href="index.html";
			return;
		}

	   	updateLoggedInUserWelcome();
	   	loadCustomerProfileData(loggedinuser);
	}

    function loadCustomerProfileData(userid) {
    	dojo.xhrGet({
			url: 'customers/rest/api/customer/byid/' + userid,
			handleAs: "json",
			load: function(response, ioArgs) {
				updateFormData(response);
			},
			error: function(response, ioArgs) {
				alert(response);
			}
		});
    }

    function updateFormData(customerdata) {
		dijit.byId('accountIdInput').set('value', customerdata._id);
		dijit.byId('milesYTDInput').set('value', customerdata.miles_ytd);
		dijit.byId('totalMilesInput').set('value', customerdata.total_miles);
		dijit.byId('memberShipStatusInput').set('value', customerdata.status);
		dijit.byId('phoneNumberInput').set('value', customerdata.phoneNumber);
		dijit.byId('phoneNumberTypeInput').set('value', customerdata.phoneNumberType);
		dijit.byId('street1AddressInput').set('value', customerdata.address.streetAddress1);
		if (customerdata.address.streetAddress2) {
			dijit.byId('street2AddressInput').set('value', customerdata.address.streetAddress2);
		}
		dijit.byId('cityInput').set('value', customerdata.address.city);
		dijit.byId('stateProvinceInput').set('value', customerdata.address.stateProvince);
		dijit.byId('countryInput').set('value', customerdata.address.country);
		dijit.byId('postalCodeInput').set('value', customerdata.address.postalCode);
    }

    function updateProfile() {
    	var userid = dojo.cookie("loggedinuser");
    	var password = dijit.byId('passwordInput').value;

    	if (password == '') {
    		alert("please specify your current password");
    		return;
    	}

    	var customerData = {
			'_id': dijit.byId('accountIdInput').value,
			'password': dijit.byId('passwordInput').value,
			'phoneNumber': dijit.byId('phoneNumberInput').value,
			'phoneNumberType': dijit.byId('phoneNumberTypeInput').value,
			'address' : {
				'streetAddress1' : dijit.byId('street1AddressInput').value,
				'city': dijit.byId('cityInput').value,
				'stateProvince': dijit.byId('stateProvinceInput').value,
				'country': dijit.byId('countryInput').value,
				'postalCode': dijit.byId('postalCodeInput').value
			}
		}

		if (!(dijit.byId('street2AddressInput').value == '')) {
			customerData.address.streetAddress2 = dijit.byId('street2AddressInput').value;
		}

		dojo.xhrPost({
			url: 'customers/rest/api/customer/byid/' + userid,
			postData : dojo.toJson(customerData),
			handleAs: "json",
			headers: { "Content-Type": "application/json"},
			load: function(response, ioArgs) {
				updateFormData(response);
				dijit.byId('updatedStatusDialog').show()
			},
			error: function(response, ioArgs) {
				alert(response);
			}
		});
    }

  </script>
</head>

<body class="claro">

<span id="variousDialogs" style="display:none">
<div dojoType="dijit.Dialog" id="loginWaitDialog" title="Please Wait">
		<table width="258">
			<tr><td>Logging in ...</td></tr>
		</table>
</div>

<div dojoType="dijit.Dialog" id="loginDialog" title="Login">
		<table width="258">
			<tr>
				<td><label>Login</label></td>
				<td><input type="text" trim="true" dojoType="dijit.form.TextBox" value="uid0@email.com" name="login" id="userId"/></td>
			</tr>
			<tr>
				<td><label>Password</label></td>
				<td><input type="password" trim="true" dojoType="dijit.form.TextBox" value="password" name="password" id="password"/></td>
			</tr>
			<tr>
				<td colspan="2">&nbsp;</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td  align="center" valign="top" width="40%"><button dojoType="dijit.form.Button" id="LoginButton" onClick="login()">Ok</button></td>
							<td align="left" valign="top" width="3%">&nbsp;</td>
							<td align="left" valign="top" width="57%"><button dojoType="dijit.form.Button" onclick="hideLoginDialog()" id="Cancel">Cancel</button></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
</div>
<div dojoType="dijit.Dialog" id="updatedStatusDialog" title="Information Updated">
	<p>Customer Information Updated Successfully</p>
	<button dojoType="dijit.form.Button" onclick="dijit.byId('updatedStatusDialog').hide()" id="updatedStatusDialogOkButton">Ok</button>
</div>
</span>

<div id="main">
	<br/>
	<header>
		<br/><br/><br/>
		<img src="images/Huawei Air.png" alt="Huawei Air"/><br/><br/>
		<div class="text-align: left">Our commitment, your pursuit.</div><br/>
	</header>
	<div id="welcomeback"><div id="loggedinwelcome"></div>
	</div>
	<div id="main_content">
		<span data-dojo-type="dijit.Declaration" data-dojo-props='widgetClass:"ToolbarSectionStart", defaults:{ label: "Label"}'>
			<span data-dojo-type="dijit.ToolbarSeparator"></span><i>${label}:</i>
		</span>

		<div id="toolbar5" data-dojo-type="dijit.Toolbar">
 			<div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Actions"'></div>
 			<div id="toolbar5.home" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:true' onClick="window.location='index.html'">Home</div>
 			<div id="toolbar5.flights" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:true' onClick="window.location='flights.html'">Flights</div>
 			<div id="toolbar5.order" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:true' onClick="window.location='orders.html'">Orders</div>
 			<div id="toolbar5.login" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:true' onClick="showLoginDialog()">Login</div>
 			<div id="toolbar5.logout" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:true' onClick="logout()">Logout</div>
 			<div id="toolbar5.account" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:true' onClick="window.location='customerprofile.html'">Account</div>
		</div>

		<div class="content">
			<table>
				<tr>
					<td colspan="2"><h2>Account Profile Information:</h2></td>
				</tr>
				<tr>
					<td>account id:</td>
					<td><input type="text" dojoType="dijit.form.TextBox" id="accountIdInput" data-dojo-props="readOnly:true"></input></td>
				</tr>
				<tr>
					<td>password:</td>
					<td><input type="password" dojoType="dijit.form.TextBox" id="passwordInput" data-dojo-props="trim:true" required="true"></input></td>
				</tr>
				<tr>
					<td colspan="2"><h2>Contact Information:</h2></td>
				</tr>
				<tr>
					<td>Phone Number:</td>
					<td><input type="text" dojoType="dijit.form.TextBox" id="phoneNumberInput" data-dojo-props="trim:true" required="true"></input></td>
				</tr>
				<tr>
					<td>Phone Type:</td>
					<td>
						<select dojoType="dijit.form.FilteringSelect" id="phoneNumberTypeInput">
							<option value="MOBILE">Mobile</option>
							<option value="HOME">Home</option>
							<option value="BUSINESS">Business</option>
							<option value="UNKNOWN">Unspecified</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Street Address:</td>
					<td><input type="text" dojoType="dijit.form.TextBox" id="street1AddressInput" data-dojo-props="trim:true" required="true"></input></td>
				</tr>
				<tr>
					<td>Street Address 2:</td>
					<td><input type="text" dojoType="dijit.form.TextBox" id="street2AddressInput" data-dojo-props="trim:true"></input></td>
				</tr>
				<tr>
					<td>City:</td>
					<td><input type="text" dojoType="dijit.form.TextBox" id="cityInput" data-dojo-props="trim:true" required="true"></input></td>
				</tr>
				<tr>
					<td>State (Province):</td>
					<td><input type="text" dojoType="dijit.form.TextBox" id="stateProvinceInput" data-dojo-props="trim:true" required="true"></input></td>
				</tr>
				<tr>
					<td>Country:</td>
					<td><input type="text" dojoType="dijit.form.TextBox" id="countryInput" data-dojo-props="trim:true" required="true"></input></td>
				</tr>
				<tr>
					<td>Postal Code:</td>
					<td><input type="text" dojoType="dijit.form.TextBox" id="postalCodeInput" data-dojo-props="trim:true" required="true"></input></td>
				</tr>
				<tr>
					<td colspan="2"><h2>Customer Loyalty Information:</h2></td>
				</tr>
				<tr>
					<td>Membership status:</td>
					<td><input type="text" dojoType="dijit.form.TextBox" id="memberShipStatusInput" data-dojo-props="readOnly:true"></input></td>
				</tr>
				<tr>
					<td>Miles year to date:</td>
					<td><input type="text" dojoType="dijit.form.NumberTextBox" id="milesYTDInput" data-dojo-props="readOnly:true"></input></td>
				</tr>
				<tr>
					<td>Total miles:</td>
					<td><input type="text" dojoType="dijit.form.NumberTextBox" id="totalMilesInput" data-dojo-props="readOnly:true"></input></td>
				</tr>
				<tr>
					<td rowspan="2">
						<button dojoType="dijit.form.Button" id="updateProfileButton" onClick="updateProfile()">Update Profile</button>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<footer>
		<p><a href="config.html">configure the Huawei Air environment.</a></p>
	</footer>
</div>

<p>&nbsp;</p>
</body>
</html>
